<template>
  <el-row type="flex" :gutter="20">
    <el-col :span="10" class="left">
      <el-card :body-style="{ padding: '0px' }" shadow="always" class="info">
        <div slot="header" class="header">
          <img :src="avtar" alt="" style="vertical-align: middle" />
          <div class="header_right">
            <h2>wkf-handsome-<el-tag>{{ role }}</el-tag></h2>
            <span>柯锋作品</span>
          </div>
        </div>
        <div class="body">
          <section class="item">
            <span class="light">上次登录时间:</span>
            <span class="ml20">2022-12-30</span>
          </section>
          <section class="item">
            <span class="light">上次登录地点:</span>
            <span class="ml20">天津</span>
          </section>
        </div>
      </el-card>
      <!--表格-->
      <el-card class="table">
        <el-table :data="tableData" height="300" style="width: 100%">
          <el-table-column prop="date" label="日期" fixed> </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="14" class="right">
      <section class="cardInfo">
        <el-card class="column" v-for="v in 6" :key="v">
          <span class="el-icon-circle-check ico"></span>
          <section>
            <h2>￥1234</h2>
            <span>今日订单</span>
          </section>
        </el-card>
      </section>
      <!--折线图部分-->
      <el-card class="chart">
        <div class="line" style="width: 100%; height: 100%" ref="line"></div>
      </el-card>
      <section class="pie_bar">
        <el-card class="bar">
          <div
            class="bar_self"
            style="width: 100%; height: 100%"
            ref="bar"
          ></div>
        </el-card>
        <el-card class="pie">
          <div
            class="pie_self"
            style="width: 100%; height: 100%"
            ref="pie"
          ></div>
        </el-card>
      </section>
    </el-col>
  </el-row>
</template>
<script>
import { tableData } from "@/mock/mockServerData/home_user";
import { linesData, barData, pieData } from "@/mock/mockServerData/charts";
import * as echarts from "echarts";
export default {
  data() {
    return {
      avtar: require("@/assets/images/wkf.jpg"),
      tableData,
    };
  },
  created() {},
  computed: {
    role() {
      return this.$store.state.Dynamic.role;
    },
  },
  mounted() {
    this.initLine();
    this.initBar();
    this.initPie();
  },
  methods: {
    initLine() {
      let lineCharts = echarts.init(this.$refs.line);
      let legnData = linesData.series.map((item) => item.name);
      let options = {
        title: {
          text: "wkf模拟Line",
          textStyle: {
            color: "#f40",
            fontSize: 14,
          },
        },
        legend: {
          data: legnData,
          x: "right",
        },
        grid: {
          left: "3%",
          right: "4%",
          top: "20%",
          bottom: "0%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          position: ["50%", "0%"],
        },
        xAxis: linesData.xAxis,
        yAxis: {
          type: "value",
        },
        series: linesData.series,
      };
      lineCharts.setOption(options);
    },
    initBar() {
      let barCharts = echarts.init(this.$refs.bar);
      let legnData = [barData.series[0].name];
      let options = {
        title: {
          text: "wkf模拟Bar",
          left: "center",
          textStyle: {
            color: "#f40",
            fontSize: 14,
          },
        },
        xAxis: barData.xAxis,
        yAxis: {
          type: "value",
        },
        grid: {
          left: "3%",
          bottom: "10%",
          top: "10%",
        },
        legend: {
          data: legnData,
          orient: "vertical",
          x: "right",
        },
        tooltip: {
          trigger: "axis",
        },
        series: barData.series,
      };
      barCharts.setOption(options);
    },
    initPie() {
      let barCharts = echarts.init(this.$refs.pie);
      let legnData = pieData.series[0].data.map((item) => item.name);
      let options = {
        title: {
          text: "wkf模拟pie",
          left: "left",
          textStyle: {
            color: "#f40",
            fontSize: 14,
          },
        },
        legend: {
          data: legnData,
          orient: "vertical",
          x: "left",
          y: "bottom",
        },
        tooltip: {
          trigger: "item",
        },
        series: pieData.series,
      };
      barCharts.setOption(options);
    },
  },
  activated() {},
  watch: {},
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/home.scss";
</style>
